iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0
Modern Web

【每天5分鐘】學前端系列 第 19

Day19【每天5分鐘】學前端 | JavaScript 物件 object

  • 分享至 

  • xImage
  •  

物件 Object { }

物件是一個 複合資料型態 ,裡面存放自訂義的 屬性
值可以是字串、數字、陣列等等。
宣告的物件使用 大括號 (又稱 花括號{ } 包起來。

格式如下:

宣告 自訂變數 = {
    屬性名稱: 屬性值,
    ...
};

也可以宣告一個 空物件 ,再放入 資料

附上物件介紹 W3School 連結MDN 連結


範例

家裡來了一隻寵物,把牠的相關資料放進物件

const pet1 = {
    name: "芝麻球",
    color: "灰色",
    classify: ["倉鼠", "三線鼠", "鼠球家族"] // 物件結合陣列
};

取出個別屬性的值

console.log(pet1.name); // 芝麻球
console.log(pet1.color); // 灰色
console.log(pet1.classify); // (3) ["倉鼠", "三線鼠", "鼠球家族"]

多了一個新成員,我們把牠的資料放進另外一個物件裡

const pet2 = {
    name: "黃小美",
    color: "黃色",
    classify: ["倉鼠", "黃金鼠"] // 物件結合陣列
};

以陣列方式結合兩個物件,建立寵物檔案。 陣列結合物件

const petFamily = [
    pet1,
    pet2
];
console.log(petFamily); // (2) [{...}, {...}]

https://ithelp.ithome.com.tw/upload/images/20220920/20151346cV2XHuFyQc.png


補充

  • getElementById ( ): 獲取指定 ID 的元素。
  • innerHTML: 可用來 獲取內容 ,或者 新增內容

假設 HTML 有一個 <p> 標籤

<body>
    <p id="word"></p>
</body>

JS 有一個物件

<script>
    const txt = {
        title: "Hello World"
    };
</script>

我們要如何把物件的 屬性值 ,顯示在 <p> 標籤的 內容 呢?

可以這樣做:
在 JS 輸入以下內容

<script>
    document.getElementById("word").innerHTML = txt.title;
</script>

https://ithelp.ithome.com.tw/upload/images/20220920/20151346Mc7v1b8zqy.png
我們就成功地將物件的屬性值 "Hello World",新增到 id="word" 的元素中 ~♫

附上 innerHTML 介紹 W3School 連結
getElementById ( ) 介紹 W3School 連結MDN 連結


練習看看

建立一個空的表格,將以下 物件innerHTML 將資料帶進表格顯示出來。

<script>
    const car1 = {
        name: "Aston Martin",
        spec: "DBS",
        color: "Red"
    };
    const car2 = {
        name: "Audi",
        spec: "R8",
        color: "Blue"
    };
    const car3 = {
        name: "Porsche",
        spec: "918 Spyder",
        color: "Black"
    };
</script>

(如下圖)
https://ithelp.ithome.com.tw/upload/images/20220920/201513468y5N0FEfmC.png

或者自己設計內容也可以 ٩(^ᴗ^)۶

附上我寫的版本供參考 GitHub 連結


https://ithelp.ithome.com.tw/upload/images/20220920/20151346MsW5zFHqqa.png 自學指引:

  • 物件的方法
  • function、this
  • HTML DOM
  • getElementsByClassName ( ) 、 getElementsByName ( ) 、 getElementsByTagName ( )


感謝閱讀,我們明天見囉~~~ /images/emoticon/emoticon29.gif


上一篇
Day18【每天5分鐘】學前端 | JavaScript 陣列 array
下一篇
Day20【每天5分鐘】學前端 | JavaScript 流程控制 if else
系列文
【每天5分鐘】學前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言